<template>
    <div class="comp_home-product-item-wrap" @click="goDetail">
        <div class="img-wrap">
            <img class="img" :src="info.products[0].picUrl" alt="">
            <!-- <div class="text-wrap">
                <div class="text-title">{{ info.brandName }}</div>
                <img :src="info.brandIcon" alt="" class="text-label-icon">
                <div class="text-label-item"></div>
            </div> -->
        </div>
        <div class="line-clamp2 fs13 title">
            <template v-if="info.products[0].brandName">
                [<span class="tag">{{ info.products[0].brandName || '' }}</span>]
            </template>
            {{ info.products[0].productName }} {{ info.products[0].spec }}
        </div>
        <div class="label-group">
            <div class="label-item" v-if="isYuanYan == true">原研药</div>
            <div class="label-item" v-for="item in info.products[0].labels" :key="item">{{ item }}</div>
            <!-- <div class="label-item">限时优惠</div> -->
        </div>
        <div class="price-wrap df-c">
            <div class="df1 price">
                <span>￥</span>
                <span class="priceYuan">{{ info.products[0].activityPriceYuan }}</span>
                <span class="line-price">￥{{ info.products[0].priceYuan }}</span>
            </div>
            <div @click.stop="addCart" style="padding: 0px 5px;">
                <img src="../../assets/images/indexNew/tab_mall_hover-gray.png" class="icon" alt="" >
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss" rel="stylesheet/scss">
.comp_home-product-item-wrap {
    width: 100%;
    text-align: center;

    .img-wrap {
        width: 100%;
        height: 176px;
        position: relative;

        .img {
            width: 100%;
            height: 100%;
        }

        .text-wrap {}
    }

    .title {
        padding: 0 8px;
        margin-top: 6px;
        margin-bottom: 8px;
        font-family: MILanPro--GB1, MILanPro--GB1;
        font-weight: normal;
        font-size: 14px;
        color: #333333;
        line-height: 19px;
        text-align: left;

        .tag {
            color: #e39429;
        }
    }

    .label-group {
        padding: 0 8px;
        margin-bottom: 8px;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .label-item {
            margin-right: 4px;

            &:last-child {
                margin-right: 0;
            }

            padding: 2px;
            border-radius: 4px;
            border: 1px solid #82C7AB;
            font-size: 10px;
            color: #31A375;
            line-height: 10px;
        }
    }

    .price-wrap {
        padding: 0 8px 12px;
        text-align: left;
        font-size: 12px;
        color: #f51249;

        .priceYuan {
            font-family: MILanPro_SEMIBOLD--GB1, MILanPro_SEMIBOLD--GB1;
            font-weight: normal;
            font-size: 16px;
            color: #f51249;
        }

        .line-price {
            font-family: MILanPro--GB1, MILanPro--GB1;
            font-weight: normal;
            font-size: 10px;
            color: #999999;
            line-height: 12px;
            text-decoration-line: line-through;
        }

        .icon {
            width: 18px;
            height: 18px;
            display: inline-block;
        }
    }


}
</style>

<script scoped type="text/babel">
import { mapGetters, mapActions } from "vuex";

export default {
    name: "productItem",
    components: {
    },
    props: {
        info: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    data() {
        return {
        }
    },
    computed: {
        isYuanYan(){
            let arr = this.info.products[0].productParams;
            if (!Array.isArray(arr)) return false;
            return arr.some(item => item.property === '是否原研' && item.value === '是');
        }
    },
    watch: {},
    methods: {
        ...mapActions(["openRouteByWebview"]),
        goDetail() {
            this.openRouteByWebview({
                route: `/goods/detail?id=${this.info.products[0].id}`,
                jumpType: 'push',
                sendLocation: true
            })
            return;
        },
        addCart() {
            this.$api.getToken({
                uri: '/cart/sku/add'
            }).then((token) => {
                this.$api.addCart({
                    skuId: this.info.products[0].skuId,
                    number: 1,
                    chainId: this.info.products[0].chainId || 0,
                    token: token
                }).then(res => {
                    this.getShopCarNum();
                    wx.showToast({
                        title: '加入成功！',
                        icon: 'none',
                        duration: 2000
                    })
                })
            })

        },
        // 获取购物车角标数字
        getShopCarNum() {
            this.$api.getShopCarNum().then(data => {
                if (data) {
                    console.log('购物车数量：', data)
                    wx.setTabBarBadge({
                        index: 2,
                        text: `${data}`,
                    })
                }
            }, err => { })
        },
        // isYuanYan(arr) {
        //     if (!Array.isArray(arr)) return false;
        //     console.log(333,arr.some(item => item.property === '是否原研' && item.value === '是'),222)
        //     return arr.some(item => item.property === '是否原研' && item.value === '是');
        // },
    },
    mounted() {
    },
}
</script>
